<template>
  <div class="Nav-wrap">
    <ul class="nav-box hidden-xs-only">
      <li>
        <router-link to='/'>HOME</router-link>
      </li>
      <li>
        <router-link to='about'>ABOUT</router-link>
      </li>
      <li>
        <router-link to='blog'>BLOG</router-link>
      </li>
      <li>
        <router-link to='items'>ITEMS</router-link>
      </li>
    </ul>
    <router-link class="login hidden-xs-only" to="login">Login</router-link>
    <!-- 移动端菜单栏 -->
    <div class="toggle hidden-sm-and-up" :class="{toggled:data.toggled}" @click="data.toggled = !data.toggled">
      <div class="toggle_body">
        <div class="bars bars_1"></div>
        <div class="bars bars_2"></div>
        <div class="bars bars_3"></div>
        <div class="bars bars_4"></div>
        <div class="bars bars_5"></div>
        <div class="bars bars_6"></div>
        <div class="bars bars_7"></div>
        <div class="bars bars_8"></div>
        <div class="bars bars_9"></div>
      </div>
    </div>
    <transition name="fade" mode="out-in">
      <div v-if="data.isShow" class="router-name" :class="data.routerName">
        {{$route.name.toUpperCase()}}
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
  import {Component, Vue, Prop, Watch} from "vue-property-decorator"
  import { Getter, Action } from 'vuex-class'
  import { NavData } from '@/types/components/Nav.interface'
  // import {  } from "@/components" // 组件
  import 'element-ui/lib/theme-chalk/display.css';
  @Component({})
  export default class About extends Vue {
    // prop
    // data
    data: NavData = {
      componentName: 'Nav',
      routerName: '',
      isShow: true,
      toggled: false
    }
    @Watch('$route.name')
    name(n: any, o: any) {
      this.data.isShow = false
      this.data.routerName = n
      this.$nextTick(() => {
        this.data.isShow = true
      })
    }
  }
</script>

<style scoped lang="less">
  @import "~@/assets/less/variables";

  .Nav-wrap {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    background-color: @Dom-bg;
    padding-top: 20px;
    box-sizing: border-box;
    transition: all 320ms ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    .nav-box {
      min-width: 500px;
      display: flex;
      justify-content: space-between;
      position: relative;
      li {
        a {
          color: @Text3;
          cursor: pointer;
          transition: all 320ms ease;
        }
        a:hover {
          color: @Text2;
          transition: all 320ms ease;
        }
      }
    }
    .router-name {
      text-align: center;
      font: 84px/32px "D","Lucida Grande",verdana,sans-serif;
      color: #fff;
      position: absolute;
      top: 133px;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      pointer-events: none;
    }
    .toggle {
      width: 100px;
      height: 100px;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      cursor: pointer;
      user-select: none;
      transition: all .3s;
      .toggle_body {
        margin: 38px;
        width: 24px;
        height: 24px;
        position: relative;
        .bars {
          height: 4px;
          width: 4px;
          background: #fff;
          position: absolute;
          transition: all .3s;
        }
        .bars_1 {
          top: 0px;
          left: 0px;
        }
        .bars_2 {
          top: 0px;
          left: 10px;
        }
        .bars_3 {
          top: 0px;
          left: 20px;
        }
        .bars_4 {
          top: 10px;
          left: 0px;
        }
        .bars_5 {
          top: 10px;
          left: 10px;
        }
        .bars_6 {
          top: 10px;
          left: 20px;
        }
        .bars_7 {
          top: 20px;
          left: 0px;
        }
        .bars_8 {
          top: 20px;
          left: 10px;
        }
        .bars_9 {
          top: 20px;
          left: 20px;
        }
      }
    }
    .login {
      width: 100px;
      height: 100px;
      font-weight: bold;
      text-align: center;
      line-height: 100px;
      cursor: pointer;
      position: absolute;
      bottom: -38px;
      right: 40px;
    }
    .login:hover {
      color: @Text2;
    }
  }

  // 移动端菜单按钮
  .Nav-wrap .toggle.toggled .toggle_body .bars {
    background: @Text3;
    transition: all 0.3s;
  }
  .toggled.toggle .bars_1 {
    transform: translate(5px,5px);
  }
  .toggled.toggle .bars_2 {
    transform: translate(0,5px);
  }
  .toggled.toggle .bars_3 {
    transform: translate(-5px,5px);
  }
  .toggled.toggle .bars_4 {
    transform: translate(5px,0px);
  }
  .toggled.toggle .bars_5 {
    transform: translate(0px,0px);
  }
  .toggled.toggle .bars_6 {
    transform: translate(-5px,0px);
  }
  .toggled.toggle .bars_7 {
    transform: translate(5px,-5px);
  }
  .toggled.toggle .bars_8 {
    transform: translate(0px,-5px);
  }
  .toggled.toggle .bars_9 {
    transform: translate(-5px,-5px);
  }

  .Nav-wrap::after {
    content: "";
    background-color: @Dom-bg;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
  }
  /* 过渡动画 */
  .fade-leave-active,
  .fade-enter-active {
    transition: all 760ms;
  }
  .fade-enter-to,.fade-leave{
    opacity: 1;
    transform: scale(1);
  }

  .fade-leave-to,.fade-enter {
    opacity: 0;
    transform: scale(1.5);
  }
</style>

